<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>新增收货地址</title>
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/dialog.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/LArea.css" />

    <script src="../js/flexible.js" type="text/javascript"></script>
    <script src="../js/swiper.min.js" type="text/javascript"></script>
    <script src="../js/zepto-v1.2.0.min.js" type="text/javascript"></script>
    <script src="../js/dialog.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="add-address-wrapper">
      <header class="header-wrapper clearfix">
        <div class="header-container white-background">
          <div class="left-container">
            <a class="back black-back" href="javascript:history.back(-1)"></a>
          </div>
          <span class="title">新增收货地址</span>
        </div>
      </header>
      <div class="standard-form-wrapper">
        <div class="form-item">
          <label>选择城市</label>
          <input id="citySelect" readonly="" type="text" placeholder="请选择" />
          <input id="cityids" type="hidden" />
          <span class="right-arrow"></span>
        </div>
        <div class="form-item">
          <label>详细地址</label>
          <textarea class="address" rows="3" placeholder="例 某某小区1单元103室"></textarea>
        </div>
        <div class="form-item">
          <label>收货人</label>
          <input class="name" placeholder="收货人姓名" />
        </div>
        <div class="form-item">
          <label>手机号</label>
          <input class="tel" type="tel" placeholder="收货人手机号" />
        </div>
      </div>
      <div class="btn-wrapper">
        <span class="large-btn primary-btn save-btn">保存</span>
      </div>
    </div>
  </body>
  <script src="../js/LAreaData1.js" type="text/javascript"></script>
  <script src="../js/LAreaData2.js" type="text/javascript"></script>
  <script src="../js/LArea.js" type="text/javascript"></script>
  <script src="../js/autosize.js" type="text/javascript"></script>
  <script>
    $(document).ready(function () {
      const url_string = window.location.href
      const url = new URL(url_string)
      const status = url.searchParams.get('status')
      const address = url.searchParams.get('address')
      const name = url.searchParams.get('name')
      const tel = url.searchParams.get('tel')

      const cityArea = new LArea()
      cityArea.init({
        'trigger': '#citySelect',
        'valueTo': '#cityids',
        'keys': {
          id: 'value',
          name: 'text'
        },
        'type': 2,
        'data': [provs_data, citys_data, dists_data]
      })

      if (status === 'edit') {
        $('.title').html('编辑收货地址')
        $('title').html('编辑收货地址')
        $('#citySelect').attr('value', '浙江省,杭州市,拱墅区')
        $('.address').val(address)
        $('.name').val(name)
        $('.tel').val(tel)
        $('.back').attr('href', 'addressList.html?hasAddress=true')
      }
      autosize($('textarea'));
      
      $('.save-btn').click(function() {
        window.location.href = "../page/addressList.html?hasAddress=true"
      })
    })
  </script>
</html>
